<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>第一张swiper</title>
		<link rel="stylesheet" href="swiper-4.5.0/dist/css/swiper.css" />
		<style type="text/css">
			body{
				margin: 0px;
				padding: 0px;
			}
			.swiper-container{
				margin: 20px auto;
				width: 600px;
				height: 300px;
				border: 1px black solid;
			}
			.swiper-wrapper{
				border: #0000FF 1px solid;
			}
			.swiper-slide{
				background-color: red;
				display: flex;
				justify-content: center;/*等效于text-align: center*/
				align-items: center;/*等效于align-height: center*/
			}
		</style>
		
	</head>

	<body>
		<!--
			swiper 中有三层，最外一层是container大号容器层
			swiper 下面一层是wrapper中型容器层
			swiper 最里面是slide主要是三层滑动层
		-->
		<div class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide">slider1</div>
				<div class="swiper-slide">slider2</div>
				<div class="swiper-slide">slider3</div>
			</div>
		</div>
		
		<!--放在后面的原因是比放在前面初始就需要加载要节省时间-->
		<script src="swiper-4.5.0/dist/js/swiper.min.js"></script>
		
		<script>
			var swiper = new Swiper(".swiper-container");
		</script>
	</body>

</html>